import React, { useMemo } from 'react';

import { Button, Card, Form } from 'antd';
import { history } from 'umi'

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { useRequest } from '@/hooks';
import { DynamicTable } from '@/pages/TurnoverSetting/EntrySetting/components';
import { formatResultByFetchDetail } from '@/pages/TurnoverSetting/EntrySetting/util';

import { getEntryFlowConfig } from '../services';
import styles from './index.less';

const getItem = value => (value !== undefined && value !== null ? value : '--');

/**
 * 入职流程配置详情
 */
const EntryFlowSettingDetail = ({ form, location }) => {
    const { query } = location;
    const { id } = query;

    const { data, loading } = useRequest(() => getEntryFlowConfig(id), {
        cacheKey: 'entryFlowData',
        formatResult: formatResultByFetchDetail
    });

    const columns = useMemo(
        () => [
            {
                title: '流程顺序',
                dataIndex: 'processSort',
                width: '120px'
            },
            {
                title: '流程名称',
                dataIndex: 'processDescription'
            },
            {
                title: '处理人',
                dataIndex: 'assignName',
                width: '250px'
            }
        ],
        []
    );

    return (
        <PageHeaderWrapper>
            <Card
                title="入职流程配置详情"
                bordered={false}
                loading={loading}
                extra={
                    <Button
                        type="primary"
                        onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/onboardAndLeave/setting/entryFlow/edit',
                                query: { id: query?.id }
                            });
                        }}
                    >
                        编辑
                    </Button>
                }
            >
                <Form className={styles.formWrap}>
                    <Form.Item label="配置名称">{getItem(data?.settingName)}</Form.Item>
                    <Form.Item label="适用行政机构">
                        {data?.isDefault === 1 ? '全集团' : getItem(data?.administrativeName)}
                    </Form.Item>
                    <Form.Item label="配置内容">
                        <p style={{ color: 'rgba(0,0,0,0.30)' }}>
                            若流程处理人岗位当前无员工在职，系统将逐级向上寻找该岗位的上级处理相关流程
                        </p>
                        <DynamicTable
                            form={form}
                            disabled
                            initialValue={data?.content || []}
                            fieldName="entryProcessDtos"
                            columns={columns}
                        />
                    </Form.Item>
                </Form>
            </Card>
        </PageHeaderWrapper>
    );
};

EntryFlowSettingDetail.displayName = 'EntryFlowSettingDetail';

export default React.memo(Form.create()(EntryFlowSettingDetail));
